(function(window) {

    "use strict"
    //食物对象: 
    //属性 : 1. width: 食物的宽度
    //       2. height: 食物的高度
    //       3. bgc: 食物的背景颜色
    //       4. x 食物的水平坐标
    //       5. y 食物的垂直坐标
    //方法   能做的事情
    //       根据食物对象的属性把食物创建出来添加到地图中(随机生成)


    //如果只改一个参数的值 则要这样写
    //参数只写一个options: options为对象
    //如果没传实参 则options会是undefined 会报错
    //可以给options也来一个判断条件

    function Food(options) {
        options = options || {}; //如果为underfinded 就输出一个空对象
        this.width = options.width || 20;
        this.height = options.height || 20;
        this.bgc = options.bgc || 'blue';
        this.x = options.x || 0;
        this.y = options.y || 0;
    }

    //把render方法添加到原型上
    //所有的对象都能访问到
    //避免内存浪费
    //设置一个target 参数 避免名字被修改 难以维护 不要写死
    Food.prototype.render = function(target) {
        // 根据食物对象的属性把食物创建出来添加到地图中(随机生成)
        //1.创建一个div 让div表示食物元素
        //2.div设置样式, 值来源于实例对象food
        //3.把div添加到地图上
        var div = document.createElement('div');
        div.style.width = this.width + 'px';
        div.style.height = this.height + 'px';
        div.style.backgroundColor = this.bgc;
        //设置div的位置(left、top)
        //left top必须要有定位
        div.style.position = 'absolute';
        //食物坐标为[0, 39] 因为地图宽为800 默认食物宽为20
        //left = x * 食物宽度
        //随机x的坐标
        this.x = parseInt(Math.random() * target.offsetWidth / this.width);
        this.y = parseInt(Math.random() * target.offsetHeight / this.height);
        // console.log(this.x);
        div.style.left = this.x * this.width + 'px';
        div.style.top = this.y * this.height + 'px';
        target.appendChild(div);
    };
    //实例化构造函数 得到实例对象food
    /*  var food = new Food(); */
    //render方法被实例对象food调用 实现食物对象添加到地图中
    //render方法需要传递参数 因为设置了形参
    /*  food.render(map); */

    //暴露到全局使用
    window.Food = Food;
})(window);